<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es_ES" lang="es_ES" xmlns:og="http://opengraphprotocol.org/schema/" xmlns:fb="http://www.facebook.com/2008/fbml">
	<head>
		<meta http-equiv="content-type" content="text/html; charset=utf-8" />
	
		<title>Conecta con tus marcas favoritas y accede a regalos y ofertas exclusivas</title>
	
		<meta name="author" content="Runroom http://www.runroom.com" />
		<meta name="language" content="es_ES" />
		<meta http-equiv="content-style-type" content="text/css" />
		<meta http-equiv="content-script-type" content="text/javascript" />
		<meta name="robots" content="index,follow" />
		<meta name="keywords" content="" />
		<meta name="description" content="" />

		<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />

		<!-- hojas de estilo //-->
<!-- 
		<link media="all" rel="stylesheet" href="css/pre-v3.css">
 -->
		<link media="all" rel="stylesheet" href="css/styles.css" />
		<link media="all" rel="stylesheet" href="css/custom.css" />
		<link media="all" rel="stylesheet" href="css/qp-v3.css" />
		<link media="all" rel="stylesheet" href="css/user-backoffice.css" />


		<!-- conditional comment: CSS para Explorer 7 y menor //-->
			<!--[if lte IE 7]>
				<link rel="stylesheet" href="css/ie7menos.css" />
			<![endif]-->
	
		<!-- incluir scripts //-->
		<script type="text/javascript" src="js/jquery.tools.min.js"></script>
		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
		<script type="text/javascript" src="js/jquery.periodicalupdater.js"></script>
		<script type="text/javascript" src="http://maps.google.com/maps/api/js?key=ABQIAAAAzClpJywkGASi3cdCCxdvnBRyVQWqmkHGDTi57WK1YtyDytrQIhQNeQ5HGi7cnaGyd90vRPydCOgxrA&amp;sensor=false&amp;language=es_ES&amp;v=3.1&amp;region=ES"></script>
		<script type="text/javascript" src="js/json2.js"></script>
		<script type="text/javascript" src="js/jquery.cookie.js"></script>
		<script type="text/javascript" src="js/bootstrap.js"></script>
		<script type="text/javascript" src="js/locationSelector.js"></script>
		<script type="text/javascript" src="js/jquery.flip.min.js"></script>
		<script type="text/javascript" src="js/jquery.countdown.js"></script>
		<script type="text/javascript" src="js/jquery.countdown-es_ES.js"></script>
		<script type="text/javascript" src="js/jquery.scrollTo-min.js"></script>
		<script type="text/javascript" src="js/jquery.localscroll-min.js"></script>
		<script type="text/javascript" src="js/localscroll.js"></script>
		<script type="text/javascript" src="js/jquery.curvycorners.min.js"></script>
		<script type="text/javascript" src="js/jquery.fullscreenr.js"></script>	
		<script type="text/javascript" src="js/qp_tabs.js"></script>
		<script type="text/javascript" src="js/jquery.Jcrop.min.js"></script>
		<script type="text/javascript" src="js/fileuploader.js"></script>
		<script type="text/javascript" src="js/s3Capcha.js"></script>
		<script type="text/javascript" src="js/feeds.js"></script>
		<script type="text/javascript" src="js/feeds_home.js"></script>
		<!-- end incluir scripts //-->

	<script type="text/javascript">
		function verdetalles(id) {
			$('#detalles_' + id).slideToggle('fast');
			$('#det_trigger_' + id).toggleClass('clicked');
		}
	
		function cerrardetalles(id) {
			$('#detalles_' + id).slideUp('fast');
			$('#det_trigger_' + id).removeClass('clicked');
		}
		
		function modificarMail(id){
			$('#email_'+id).text($('#detalles_'+ id +' input').val());
			cerrardetalles(id);
		}
		/* Abrir o cerrar "más info" slide */
		function toggleInfo(id) {
			// abrir / cerrar div.lamasinfo y anadir/quitar class "open" al/del enlace (a)
			$('#cont_' + id).slideToggle('fast');
			if($('#mas_' + id).html()== '[detalles]') {
				$('#mas_' + id).html('[ocultar]');
			} else {
				$('#mas_' + id).html('[detalles]');
			}
			$('#mas_' + id).toggleClass('open');
		}
	
		function toggleNotificaciones(id){
			if($('input[name=chk_'+id+']').is(':checked')){
				$('#notificaciones_'+id+' li').each(function(){
					$(this).removeClass('inactivo');
					$(this).contents().find('input').removeAttr('disabled');
				});
			} else {
				$('#notificaciones_'+id+' li').each(function(){
					$(this).addClass('inactivo');
					$(this).contents().find('input').attr('disabled','disabled');
					$(this).contents().find('input').attr('checked',false);
				});
			}
		}
	
		$(document).ready(function() {
			// cerrar ventanita emergente detalles
			$(".caja").mouseleave(function() {
			//	$('.detalles').slideUp('fast');
			//	$('.disponible').removeClass('clicked');
			});
			
			/*$(".navi").mousedown(function() {
				$('.detalles').slideUp('fast');
				$('.disponible').removeClass('clicked');
			});*/
	
			// animacion de la tarjeta
			//Ocultamos desplegables
			$(".conect_cont").hide();
			
			$("#volver").hide();
			$("#back").hide();
			$("#info").click(function() {
				$("#info").hide();
				$("#tarjeta").flip({
					direction : 'lr',
					onEnd : function() {
						$("#tarjeta").css('background-color', 'transparent');
						$("#front").hide();
						$("#back").show();
						$("#volver").show();
					}
				});
			});
			$("#volver").click(function() {
				$("#volver").hide();
				$("#tarjeta").flip({
					direction : 'rl',
					onEnd : function() {
						$("#tarjeta").css('background-color', 'transparent');
						$("#front").show();
						$("#back").hide();
						$("#info").show();
					}
				});
			});
		});
	</script>

	</head>
	
	<body>
		<a name="top"></a>
		<div id="fb-root"></div>
	
		<noscript>
			<div id="aviso_js">
				<p>Lo sentimos, pero esta web sólo funciona con Javascript activado.</p>
			</div>
		</noscript>

		<!-- conditional comment: aviso para Explorer 6 y menor //-->
			<!--[if lte IE 6]>
				<div id="aviso_ie">
					<p><strong>Hemos detectado que utilizas Internet Explorer 6</strong>, un navegador obsoleto, con problemas de seguridad y compatibilidad conocidos.</p>
					<p>Recomendamos que actualices tu navegador <a href="http://www.browserchoice.eu">en la web de browserchoice.org, haciendo clic aquí</a></p>
				</div>
			<![endif]-->

		<div class="header">
			<div class="session-links">
				<a title="Accede a tu cuenta Qporama" href="registro">Inicia sessión</a>
				<a title="Crea una cuenta Qporama" href="registro">Regístrate</a>
			</div> <!-- / .social-links -->	
			
			<div class="social-links">
				<a title="Visita la página Facebook de Qporama" class="facebook" href="facebook"><span>facebook</span></a>
				<a title="Visita la página Twitter de Qporama" class="twitter" href="twitter"><span>twitter</span></a>
			</div> <!-- / .social-links -->	
	
	
			<h2 class="logo_claim">
				<a class="logo" name="top" title="volver a la página de inicio" href="index.html">
					<span class="hidden">Qporama: Conecta con tus marcas favoritas y accede a regalos y ofertas exclusivas</span>
				</a>
			</h2>
			<h1 class="claim">
				Conecta con tus <strong>marcas</strong> favoritas y <br />accede a <strong>regalos</strong> y ofertas <strong>exclusivas</strong>
			</h1>
		</div> <!-- / .header -->
	
		<div class="fondo-pagina" style="background: url(css/css_images/fondo-home-beige.jpg);">
			<div class="gradient">&nbsp;</div>
		</div>

		<div class="user">
			<div class="profile">
				<p class="profile-pic"><span class="corners w50px l"><img id="profile-img-photo-booth" src="images/male.png" alt="Matteo Monti" width="50px" height="50px" /><span class="cornersgris"></span></span></p>
				<p><span class="bienvenido">Bienvenido, <strong>Matteo Monti</strong>!</span> <small class="bot-salir"><b></b><a href="/login/logout">Salir</a></small></p>
				<p class="mis_cosas">
					<span><b></b><a href="/account/profile">mi perfil</a></span> 
					<!-- TODO: variable para saber si tiene o no alguna compra --> 
					<span><b></b><a href="/account/index">mis compras</a></span> <span class="active"><b></b><a href="/account/index">mis tarjetas</a></span>
				</p>
			</div> <!-- cerrar profile //-->
			<div class="mensajes">
				<h2 class="titulo-principal">Conéctate con tus redes preferidas</h2>
				<p class="soft">Gana puntos cada vez que compartas alguna cosa con tus amigos.</p>
			</div> <!-- cerrar mensajes //-->
		</div> <!-- cerrar user //-->

		<div class="buscar">
			<form action="#" method="get">
				<p class="fondo-input-buscar l"><input type="text" id="buscar" value="Busca un negocio o una oferta" /></p>

				<ul class="fondo-select selecciona-categoria">
					<li class="catselector-link" onclick="$('#CatSelector').slideToggle('fast');">Selecciona una categoría
						<ul id="CatSelector">
							<li><a title="Moda y Complementos" href="#">Comer y beber</a></li>
							<li><a title="Moda y Complementos" href="#">Moda y Complementos</a></li>
							<li><a title="Moda y Complementos" href="#">Moda y Complementos</a></li>
							<li><a title="Moda y Complementos" href="#">Moda y Complementos</a></li>
						</ul>
					</li>
				</ul>

				<p class="fondo-select l" style="position: relative; left: -2px; z-index: 0;"><input type="text" id="location_selector_ciudad" value="Barcelona" /> <small><a id="location_selector_ciudad_cambiar" href="javascript:;">[cambiar]</a></small></p>
				<p class="boton secundario grande l"><input type="submit" value="buscar" /></p>
			</form>
		</div> <!-- cerrar buscar //-->

<!-- aqui empieza el div class="page -->

<div class="page">
		
		<!-- columna de contenido principal //-->
		<div class="c-960">
			<!-- columna de contenido ancho gris, tipo "login" //-->
			<div class="caja c960 f1f1f1 contabs">
				<div class="content">


					<ul id="tabs">
						<li class="tab"><a class="tablink" href="#tabs-1">Mis datos personales</a></li>
						<li class="tab"><a class="tablink" href="#tabs-2">Configurar notificaciones</a></li> 
						<li class="tab active"><span class="tablink">Configurar redes sociales</span></li>
					</ul><!-- cerrar tabs //-->
			

					<div class="formulario ancho" style="padding-top: 0; overflow: visible;">		
						<div class="socialcont">
					
							<p>
								<img src="css/css_images/facebook_logo.png" alt="facebook" />
								<span id ="email_1" class="email">maria@gmail.com</span>
								<small class="cambiardatos"><a href="#" onclick="verdetalles(1); return false;" id="det_trigger_1">[cambiar]</a></small>
								<small class="masinfoh"><a id="mas_1" href="#" onclick="toggleInfo('1'); return false;">[detalles]</a></small>
							</p> <!-- cerrar .cabecera //-->
						<!-- ventanita emergente 1 //-->
								<div id="detalles_1" class="detalles azul">
									<h4>Actualiza tu E-Mail de facebook</h4>
									<fieldset>
										<p style="padding-top: 20px;"><label for="email">E-Mail</label></p>
										<p class="fondo-input"><input type="text" value="maria@gmail.com" id="email" required="required" name="email" rel="tooltip" title="Escribe tu E-mail" /></p>
										<p class="boton primario pequeno" style="display: block; float: left; width: 100px; margin: 10px 10px 10px 0;"><a href="#" onclick="modificarMail(1);return false;">actualizar</a></p>
										<p style="display: block; float: left; width: auto; height: 20px; line-height: 20px; margin: 10px;"><a href="#" title="cancelar" onclick="verdetalles(1); return false;">cancelar</a></p>
									</fieldset>
									<div class="clear">&nbsp;</div>
									<div class="det-cierre"></div>
								</div> <!-- cerrar .detalles //-->
							
							<div class="clear">&nbsp;</div>
					
							<div id="cont_1" class="conect_cont">
								<div class="not_general">
									<label for="chk_1">
										<input type="checkbox" id="chk_1" name="chk_1" value="true" onclick="toggleNotificaciones(1);" /> &nbsp;
										<b>Enviar notificaciones</b>
									</label>
								</div>
								<ul id="notificaciones_1" class="notificaciones">
									<li class="inactivo">
										<p class="pqarial">
											<label for="opt_1">
												Cuando me conecte a una nueva <b>tarjeta</b>
												<span class="r">
													<input type="checkbox" disabled="disabled" name="opt_1" id="opt_1" />
													<small>+2 pt</small>
												</span>
											</label>
										</p>
									</li>
									<li class="inactivo">
										<p class="pqarial">
											<label for="opt_2">
												Cuando compre una nueva <b>oferta</b> de una de mis tarjetas
												<span class="r">
													<input type="checkbox" disabled="disabled" name="opt_2" id="opt_2" />
													<small>+1 pt</small>
												</span>
											</label>
										</p>
									</li>
									<li class="inactivo">
										<p class="pqarial">
											<label for="opt_3">
												Cuando publique una nueva <b>foto</b> de una de mis tarjetas
												<span class="r">
													<input type="checkbox" disabled="disabled" name="opt_3" id="opt_3" />
													<small>+1 pt</small>
												</span>
											</label>
										</p>
									</li>
									<li class="inactivo">
										<p class="pqarial">
											<label for="opt_4">
												cuando realice un <b>check-in</b> de una de mis tarjetas
												<span class="r">
													<input type="checkbox" disabled="disabled" name="opt_4" id="opt_4" />
													<small>+1 pt</small>
												</span>
											</label>
										</p>
									</li>
								</ul>
							</div> <!-- cerrar #cont_1.conect_cont //-->
					
						</div> <!-- cerrar .socialcont //-->


						<div class="socialcont"> <!-- sin conectar //-->
								<p>
									<img src="css/css_images/facebook_logo.png" alt="facebook" />
									<span class="peque no_conect">No estás conectado.</span>
									<span class="conect_bt"><a title="Conectate usando tu cuenta facebook" href="#"><img src="css/css_images/conecta-facebook.png" alt="Conectate usando tu cuenta facebook" width="112" height="40" /></a></span>
								</p>
							<div class="clear">&nbsp;</div>
						</div> <!-- cerrar .socialcont //-->
		
		
						<div class="socialcont"> <!-- sin conectar //-->
								<p>
									<img src="css/css_images/twitter_logo.png" alt="twitter" />
									<span class="peque no_conect">No estás conectado.</span>
									<span class="conect_bt"><a title="Conectate usando tu cuenta twitter" href="#"><img src="css/css_images/conecta-twitter.png" alt="Conectate usando tu cuenta twitter" width="112" height="40" /></a></span>
								</p>
							<div class="clear">&nbsp;</div>
						</div> <!-- cerrar .socialcont //-->
		
						<div class="socialcont"> <!-- sin conectar //-->
								<p>
									<img src="css/css_images/foursquare_logo.png" alt="foursquare" />
									<span class="peque no_conect">No estás conectado.</span>
									<span class="conect_bt"><a title="Conectate usando tu cuenta foursquare" href="#"><img src="css/css_images/conecta-foursquare.png" alt="Conectate usando tu cuenta foursquare" width="112" height="40" /></a></span>
								</p>
							<div class="clear">&nbsp;</div>
						</div> <!-- cerrar .socialcont //-->


						<div class="socialcont">
							<p>
								<img src="css/css_images/foursquare_logo.png" alt="foursquare" />
								<span id ="email_3" class="email">maria@gmail.com</span>
								<small class="cambiardatos"><a href="#" onclick="verdetalles(3);return false;" id="det_trigger_3">[cambiar]</a></small>
								<small class="masinfoh"><a id="mas_3" href="#" onclick="toggleInfo('3'); return false;">[detalles]</a></small>
							</p> <!-- cerrar .cabecera //-->

							<!-- ventanita emergente 1 //-->
								<div id="detalles_3" class="detalles azul">
									<h4>Actualiza tu E-Mail de foursquare</h4>
									<fieldset>
										<p style="padding-top: 20px;"><label for="email-new">E-Mail</label></p>
										<p class="fondo-input"><input type="text" value="maria@gmail.com" id="email-new" required="required" name="email-new" rel="tooltip" title="Escribe tu E-mail" /></p>
										<p class="boton primario pequeno" style="display: block; float: left; width: 100px; margin: 10px 10px 10px 0;"><a href="#" onclick="modificarMail(3);return false;">actualizar</a></p>
										<p style="display: block; float: left; width: auto; height: 20px; line-height: 20px; margin: 10px;"><a href="#" title="cancelar" onclick="verdetalles(3); return false;">cancelar</a></p>
									</fieldset>
									<div class="clear">&nbsp;</div>
									<div class="det-cierre"></div>
								</div> <!-- cerrar .detalles //-->
					
							<div class="clear">&nbsp;</div>
					
							<div id="cont_3" class="conect_cont">
								<div class="not_general">
									<label for="chk_3">
										<input type="checkbox" id="chk_3" name="chk_3" value="true" onclick="toggleNotificaciones(3);" /> &nbsp;
										<b>Enviar notificaciones</b>
									</label>
								</div>
								<ul id="notificaciones_3" class="notificaciones">
									<li class="inactivo">
										<p class="pqarial">
											<label for="opt_31">
												Cuando me conecte a una nueva <b>tarjeta</b>
												<span class="r">
													<input type="checkbox" disabled="disabled" name="opt_31" id="opt_31" />
													<small>+2 pt</small>
												</span>
											</label>
										</p>
									</li>
									<li class="inactivo">
										<p class="pqarial">
											<label for="opt_32">
												Cuando compre una nueva <b>oferta</b> de una de mis tarjetas
												<span class="r">
													<input type="checkbox" disabled="disabled" name="opt_32" id="opt_32" />
													<small>+1 pt</small>
												</span>
											</label>
										</p>
									</li>
									<li class="inactivo">
										<p class="pqarial">
											<label for="opt_33">
												Cuando publique una nueva <b>foto</b> de una de mis tarjetas
												<span class="r">
													<input type="checkbox" disabled="disabled" name="opt_33" id="opt_33" />
													<small>+1 pt</small>
												</span>
											</label>
										</p>
									</li>
									<li class="inactivo">
										<p class="pqarial">
											<label for="opt_34">
												cuando realice un <b>check-in</b> de una de mis tarjetas
												<span class="r">
													<input type="checkbox" disabled="disabled" name="opt_34" id="opt_34" />
													<small>+1 pt</small>
												</span>
											</label>
										</p>
									</li>
								</ul>
							</div> <!-- cerrar #cont_1.conect_cont //-->	
								
						</div> <!-- cerrar .socialcont //-->
		
						<div class="botonera">
							<p class="boton primario grande" style="display: block; float: left; width: 162px; margin: 20px 20px 20px 0;"><a href="#">guardar cambios</a></p>
							<p style="display: block; float: left; width: auto; height: 42px; line-height: 42px; margin: 20px;"><a href="#" title="cancelar">cancelar</a></p>
						</div> <!-- cerrar .botonera //-->
		
					</div> <!-- cerrar div formulario grande //-->
				<div class="clear">&nbsp;</div>
			</div> <!-- cerrar content //-->
			<div class="cierre"></div>
		
			</div> <!-- cerrar caja c960 f1f1f1 //-->
		</div> <!-- cerrar columna de 960px de ancho //-->
	</div> <!-- cerrar page //-->

	<div id="gototop">
		<p><a href="#top">volver arriba</a></p>
	</div>

</body>
</html>
